<template lang="">
	<div class="myOrder-wrap">
		<div class="myOrder">
			<p class="orderText">我的订单</p>
			<ul class="orderNav">
				<li
					class="iconfont icon-liaotian"
					v-for="(item, index) in seletedata"
					:key="index"
					:id="item.id"
					@click="orderAction(item.id, item.name, item.orderstate)"
				>
					<p>{{ item.name }}</p>
				</li>
			</ul>
		</div>
		<router-view />
	</div>
</template>
<script>
import OrderItem from '../com/order/orderItem.vue';
export default {
	name: 'myorder',
	components: {
		[OrderItem.name]: OrderItem,
	},
	data() {
		return {
			seletedata: [
				{
					id: 1,
					name: '已确认',
					orderstate: 'affirm',
				},
				{
					id: 2,
					name: '待支付',
					orderstate: 'unpaid',
				},
				{
					id: 3,
					name: '退款中',
					orderstate: 'refund',
				},
				{
					id: 4,
					name: '全部订单',
					orderstate: '',
				},
			],
		};
	},
	methods: {
		orderAction: function (id, name, orderstate) {
			// ev.currentTarget.getAttribute("id")
			this.$router.push({
				name: `myorder`,
				params: { name, id, orderstate },
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.myOrder {
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #fbfbfb;
	border-bottom: 1px solid #b3b4c7;
	.orderText {
		font-size: 16px;
		font-weight: 900;
		padding: 20px;
		color: #333;
	}
	.orderNav {
		display: flex;
		justify-content: space-around;
		.iconfont {
			font-size: 24px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px;
			color: #777779;
			p {
				font-size: 12px;
				padding: 10px;
				color: #b3b4c7;
			}
		}
	}
}
</style>
